<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Arcs</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var point = view.center;
		for (var i = 0; i < 30; i++) {
			var vector = new Point(10 + 20 * i, 0).rotate(i);
			var l = vector.length;
			var path = new Path();
			path.fillColor = i % 2 ? 'red' : 'black';
			path.closed = true;
			for (var j = 0; j < 17; j++) {
				vector = vector.rotate(45 / 2);
				if (j == 0) {
					path.add(point + vector);
				} else {
					path.arcTo(point + vector, true);
				}
			}
			project.activeLayer.insertChild(0, path);
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>